import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import Helmet from 'react-helmet';
import moment from 'moment';
import { TabBar, Card, WhiteSpace } from 'antd-mobile';

import {withClient} from '../../hoc'


import {getParams} from '../../utils/crmUtils';

import { increment } from '../../redux/modules/demo';
import {setToken, setUserInfo, setImgUrl} from '../../redux/modules/token';

import Calendar from '../../components/common/Calendar';
import Features from '../../components/Features';
import User from '../../components/User';

import './index.sass';

const mapStateToProps = (state, owner) => ({
  test: state,
  access_token: state.token.access_token,
  userInfo: state.token.userInfo,
  imgUrl: state.token.imgUrl,
});

@withClient
@connect(mapStateToProps, {setToken, setUserInfo})
export default class Home extends Component {
  constructor(props) {
    super(props);
    const access_token = props.access_token === '' ? props.location.search ? getParams(props.location.search).access_token : null : props.access_token;
    this.state = {
      value: null,
      hidden: false,
      selectedTab:
        props.location.pathname === '/' || props.location.pathname === '' || props.location.pathname === '/home'
          ? 'blueTab'
          : props.location.pathname === '/features' || props.location.pathname === '/features/'
            ? 'redTab'
            : props.location.pathname === '/user' || props.location.pathname === '/user/'
              ? 'yellowTab'
              : '',
      access_token,
    };
    // console.log(this.props.access_token, props.location.search, access_token);
    props.location.search && (this.props.setToken(access_token));
  }
  onChange = value => {
    console.log(value);
    this.setState({
      value
    });
  };
  onScrollChange = value => {
    console.log(value);
  };

  renderCardHead = (title, number, callback) => {
    return <div style={{width: '100%'}}>{title} ({number}) <span onClick={() => callback} style={{float: 'right',cursor:'pointer'}}> <i className='crmiconfont crmicon-jia'/> </span></div>
  }

  render() {
    const history = this.props.history;
    return (
      <div className='home-container' style={{ height: '100%' }}>
        <Helmet title="主页" />
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#33A3F4"
          barTintColor="white"
          style={{
            height: '100%'
          }}
          hidden={this.state.hidden}
        >
          <TabBar.Item
            title="工作台"
            key="Life"
            icon={
              <div
                style={{
                  width: '22px',
                  height: '22px',
                  background:
                    'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  21px 21px no-repeat'
                }}
              />
            }
            selectedIcon={
              <div
                style={{
                  width: '22px',
                  height: '22px',
                  background:
                    'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center /  21px 21px no-repeat'
                }}
              />
            }
            selected={this.state.selectedTab === 'blueTab'}
            badge={1}
            onPress={() => {
              history.push('/home');
              this.setState({
                selectedTab: 'blueTab'
              });
            }}
            data-seed="logId"
          >
            
            <Calendar
              onClick={() => {}}
              disabledDate={currentDate =>
                currentDate.format('YYYY-MM-DD') === moment('2018-07-03', 'YYYY-MM-DD').format('YYYY-MM-DD')
              }
              dateCellRender={currentDate =>
                currentDate.format('YYYY-MM-DD') === moment('2018-07-03', 'YYYY-MM-DD').format('YYYY-MM-DD') ? (
                  <span className='green-point'></span>
                ) : (
                  ''
                )
              }
              // validRange={[19, 2009]}
            />
            <WhiteSpace />
            {/*计划跟进的客户*/}
            <Card> 
              <Card.Header title={this.renderCardHead('计划跟进的客户', 4 ,()=>{})} />
              <Card.Body>
                <div>This is content of `Card`</div>
              </Card.Body>
            </Card>

            <WhiteSpace />
            {/*已跟进的客户*/}
            <Card>
              <Card.Header title={this.renderCardHead('已跟进的客户', 4 ,()=>{})} />
              <Card.Body>
                <div>This is content of `Card`</div>
              </Card.Body>
            </Card>

            <WhiteSpace />
            {/*待办事项*/}
            <Card>
              <Card.Header title={this.renderCardHead('待办事项', 4 ,()=>{})} />
              <Card.Body>
                <div>This is content of `Card`</div>
              </Card.Body>
            </Card>

            <WhiteSpace />

          </TabBar.Item>
          <TabBar.Item
            title="功能"
            key="功能"
            icon={
              <div
                style={{
                  width: '22px',
                  height: '22px',
                  background:
                    'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  21px 21px no-repeat'
                }}
              />
            }
            selectedIcon={
              <div
                style={{
                  width: '22px',
                  height: '22px',
                  background:
                    'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center /  21px 21px no-repeat'
                }}
              />
            }
            selected={this.state.selectedTab === 'redTab'}
            badge={1}
            onPress={() => {
              history.push('/features');
              this.setState({
                selectedTab: 'redTab'
              });
            }}
            data-seed="logId"
          >
            <Features history={this.props.history} />
          </TabBar.Item>
          <TabBar.Item
            title="我"
            key="我"
            icon={
              <div
                style={{
                  width: '22px',
                  height: '22px',
                  background:
                    'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  21px 21px no-repeat'
                }}
              />
            }
            selectedIcon={
              <div
                style={{
                  width: '22px',
                  height: '22px',
                  background:
                    'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center /  21px 21px no-repeat'
                }}
              />
            }
            selected={this.state.selectedTab === 'yellowTab'}
            badge={1}
            onPress={async() => {
              history.push('/user');
              this.setState({
                selectedTab: 'yellowTab'
              });
              if(!this.props.userInfo){
                const res = await this.props.client.post(`/crm/api/mobile/personalinfo`,{access_token: this.props.access_token})
                console.log(res);
                this.props.setUserInfo(res.data);
              } 
            }}
            data-seed="logId"
          >
            <User {...this.props.userInfo} imgUrl={this.props.imgUrl}/>
          </TabBar.Item>
        </TabBar>
      </div>
    );
  }
}
